<template>
    <div>
        <div class="search_box">
            <p class="search_head">车场预警</p>
            <el-form ref="parkwarn" :model="parkwarn" label-width="80px" :rules="rules">
                <el-row>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="开启预警" :errors="errors.open" prop="open">
                            <el-radio-group v-model="parkwarn.open">
                                <el-radio :label="0">开启</el-radio>
                                <el-radio :label="1">不开启</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="联系人" :error="errors.contact_user" prop="contact_user">
                            <el-input v-model="parkwarn.contact_user" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="联系电话" :error="errors.contact_mobile" prop="contact_mobile">
                            <el-input v-model="parkwarn.contact_mobile" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="parkwarnSubmit">确认</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                parkwarn: {
                    open: 0,
                    id: '',
                    contact_user: '',
                    contact_mobile: ''
                },
                errors: {
                    open: '',
                    contact_user: '',
                    contact_mobile: ''
                },
                rules: {
                    //open: [
                    //    {required: true, message: '请选择开始与否', 'trigger': 'blur'}
                    //],
                    contact_user: [
                        {required: true, message: '请填写联系人', 'trigger': 'blur'}
                    ],
                    contact_mobile: [
                        {required: true, message: '请填写联系电话', 'trigger': 'blur'}
                    ]
                }
            }
        },
        props: {
            park_code: String
        },
        methods: {
            parkwarnSubmit(){
                if (this.park_code == '') {
                    this.$message({
                        showClose: true,
                        message: '请先添加车场',
                        type: 'error'
                    });
                    return false;
                }
                this.$refs['parkwarn'].validate((valid) => {
                    if (valid) {
                        let params = new Object();
                        for (var key in this.parkwarn) {
                            params[key] = this.parkwarn[key];
                        }
                        params['park_code'] = this.park_code;
                        this.httpPostForm('/parkwarn/renew', params, 'parkwarn');
                    } else {
                        return false;
                    }
                })

            }
        },
        watch: {
            'park_code': function () {
                this.$http.get('/parkwarn/index', {params:{park_code:this.park_code}})
                    .then(function (response) {
                        //如果接口返回的status不等于200,表示网络出错，或者服务端出错
                        if (response.status != 200) {
                            this.$message({
                                showClose: true,
                                message: '系统错误',
                                type: 'error'
                            });
                        }

                        //根据接口返回错误内容，实时控制对应控件，显示错误提示信息
                        let data = response.data;
                            for (var key in data.data[0]) {
                                this.$set(this.parkwarn, key, data.data[0][key]);
                            }
                    }.bind(this))
                    .catch(function (error) {
                        return Promise.reject(error);
                    });
            }
        }
    }
</script>